<template>
  <div class="bg-gray-50 min-h-screen font-sans">
    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-gray-100 py-4">
      <div class="container mx-auto px-4 flex items-center justify-between">
        <!-- 返回按钮 -->
        <button class="text-gray-600 p-2" @click="goBack">
          <i class="fa fa-arrow-left text-xl"></i>
        </button>

        <!-- 标题 -->
        <h1 class="text-xl font-medium text-gray-800">登录</h1>

        <!-- 微信图标 -->
        <button class="text-gray-600 p-2">
          <i class="fa fa-weixin text-xl"></i>
        </button>
      </div>
    </header>

    <!-- 登录表单区域 -->
    <main class="container mx-auto px-6 py-10">
      <form @submit.prevent="handleLogin" class="max-w-md mx-auto">
        <!-- 用户名/邮箱输入框 -->
        <div class="mb-5">
          <div class="relative">
            <input
                type="text"
                placeholder="用户名 / 邮箱"
                v-model="users.account"
                class="w-full pl-10 pr-4 py-4 border border-gray-200 rounded-lg bg-white focus:outline-none focus:border-gray-300 transition duration-200"
            >
            <i class="fa fa-user absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>

        <!-- 密码输入框 -->
        <div class="mb-6">
          <div class="relative">
            <input
                :type="showPassword ? 'text' : 'password'"
                placeholder="密码"
                v-model="users.password"
                class="w-full pl-10 pr-10 py-4 border border-gray-200 rounded-lg bg-white focus:outline-none focus:border-gray-300 transition duration-200"
            >
            <i class="fa fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            <button
                type="button"
                @click="togglePassword"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
            >
              <i :class="showPassword ? 'fa fa-eye-slash' : 'fa fa-eye'"></i>
            </button>
          </div>
        </div>

        <!-- 登录按钮 -->
        <button
            type="submit"
            class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-4 rounded-lg transition duration-200"
        >
          登录
        </button>

        <!-- 忘记密码链接 -->
        <div class="mt-4 text-right">
          <a href="#" class="text-gray-500 hover:text-gray-700 text-sm transition-colors">忘记密码?</a>
        </div>
      </form>

      <!-- 注册引导 -->
      <div class="max-w-md mx-auto mt-12 text-center">
        <p class="text-gray-500">
          没有账号?
          <a href="/register" @click.prevent="goToRegister" class="text-orange-500 font-medium ml-1 hover:underline">去注册</a>
        </p>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 假设users是一个包含用户名和密码的对象
const users = ref({
  account: '',
  password: ''
});
const showPassword = ref(false);
const router = useRouter();

// 切换密码显示状态
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const goToRegister = () =>{
  router.push("/register");
}
// 处理登录
const handleLogin = () => {
  axios.post("/api/users/login", users.value)
      .then(res => {
        console.log("登录信息:", res.data);
        if (res.data.code == 200){
          sessionStorage.setItem("token", res.data);
          ElMessage({
            message: res.data.msg,
            type: 'success',
            duration: 2000,
            onClose: () => {
              router.push("/home")
            }
          })
        }else {
          ElMessage({
            message: res.data.msg,
            type: 'error',
            duration: 2000,
          })
        }
      })
      .catch(err => {
        console.error("登录失败:", err);
      });
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};
</script>

<style scoped>
/* 确保Font Awesome图标正确显示 */
@import url("https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css");

/* 可添加额外的组件样式 */
</style>
